<!doctype html>
<html>
<head>
  <title>Network | DOT language playground</title>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
  <script src="../../../../dist/vis.js"></script>
  <link href="../../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />

  <style type="text/css">
    body, html {
      font: 10pt sans;
      line-height: 1.5em;;
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      color: #4d4d4d;
      box-sizing: border-box;
      overflow: hidden;
    }

    #header {
      margin: 0;
      padding: 10px;
      box-sizing: border-box;
    }

    #contents {
      height: 100%;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      position: relative;
    }

    #left, #right {
      position: absolute;
      width: 50%;
      height: 100%;
      margin: 0;
      padding: 10px;
      box-sizing: border-box;
      display: inline-block;
    }

    #left {
      top: 0;
      left: 0;
    }

    #right {
      top: 0;
      right: 0;
    }

    #error {
      color: red;
    }

    #data {
      width: 100%;
      height: 100%;
      border: 1px solid #d3d3d3;
      box-sizing: border-box;
      resize: none;
    }

    #draw {
      padding: 5px 15px;
    }

    #mynetwork {
      width: 100%;
      height: 100%;
      border: 1px solid #d3d3d3;
      box-sizing: border-box;
    }

    a:hover {
      color: red;
    }

  </style>
  
</head>
<body>

<div id="header">
  <h1>DOT language playground</h1>

  <p>
    Play around with the DOT language in the textarea below, or select one of the following examples:
  </p>
  <p style="margin-left: 30px;">
    <a href="#" class="example" data-url="data/simple.gv.txt">simple</a>,
    <a href="#" class="example" data-url="data/computer_network.gv.txt">computer network</a>,
    <a href="#" class="example" data-url="data/cellular_automata.gv.txt">cellular automata</a>,
    <a href="#" class="example" data-url="graphvizGallery/fsm.gv.txt">fsm *</a>,
    <a href="#" class="example" data-url="graphvizGallery/hello.gv.txt">hello *</a>,
    <a href="#" class="example" data-url="graphvizGallery/process.gv.txt">process *</a>,
    <a href="#" class="example" data-url="graphvizGallery/siblings.gv.txt">siblings *</a>,
    <a href="#" class="example" data-url="graphvizGallery/softmaint.gv.txt">softmaint *</a>,
    <a href="#" class="example" data-url="graphvizGallery/traffic_lights.gv.txt">traffic lights *</a>,
    <a href="#" class="example" data-url="graphvizGallery/transparency.gv.txt">transparency *</a>,
    <a href="#" class="example" data-url="graphvizGallery/twopi2.gv.txt">twopi2 *</a>,
    <a href="#" class="example" data-url="graphvizGallery/unix.gv.txt">unix *</a>,
    <a href="#" class="example" data-url="graphvizGallery/world.gv.txt">world *</a>
  </p>
  <p>
    The examples marked with a star (*) come straight from the <a href="http://www.graphviz.org/Gallery.php">GraphViz gallery</a>.
  </p>
  <div>
    <button id="draw" title="Draw the DOT graph (Ctrl+Enter)">Draw</button>
    <span id="error"></span>
  </div>
</div>

<div id="contents">
  <div id="left">
    <textarea id="data">
digraph {
  node [shape=circle fontsize=16]
  edge [length=100, color=gray, fontcolor=black]

  A -> A[label=0.5];
  B -> B[label=1.2] -> C[label=0.7] -- A;
  B -> D;
  D -> {B; C}
  D -> E[label=0.2];
  F -> F;
  A [
    fontcolor=white,
    color=red,
  ]
}
    </textarea>
  </div>
  <div id="right">
    <div id="mynetwork"></div>
  </div>
</div>

<script type="text/javascript">
  // create a network
  var container = document.getElementById('mynetwork');
  var options = {
    physics: {
      stabilization: false,
      barnesHut: {
        springLength: 200
      }
    }
  };
  var data = {};
  var network = new vis.Network(container, data, options);

  $('#draw').click(draw);

  $('a.example').click(function (event) {
    var url = $(event.target).data('url');
    $.get(url)
        .done(function(dotData) {
          $('#data').val(dotData);
          draw();
        })
        .fail(function () {
          $('#error').html('Error: Cannot fetch the example data because of security restrictions in JavaScript. Run the example from a server instead of as a local file to resolve this problem. Alternatively, you can copy/paste the data of DOT graphs manually in the textarea below.');
          resize();
        });
  });

  $(window).resize(resize);
  $(window).load(draw);

  $('#data').keydown(function (event) {
    if (event.ctrlKey && event.keyCode === 13) { // Ctrl+Enter
      draw();
      event.stopPropagation();
      event.preventDefault();
    }
  });

  function resize() {
    $('#contents').height($('body').height() - $('#header').height() - 30);
  }

  function draw () {
    try {
      resize();
      $('#error').html('');

      // Provide a string with data in DOT language
      data = vis.network.convertDot($('#data').val());

      network.setData(data);
    }
    catch (err) {
      // set the cursor at the position where the error occurred
      var match = /\(char (.*)\)/.exec(err);
      if (match) {
        var pos = Number(match[1]);
        var textarea = $('#data')[0];
        if(textarea.setSelectionRange) {
          textarea.focus();
          textarea.setSelectionRange(pos, pos);
        }
      }

      // show an error message
      $('#error').html(err.toString());
    }
  }
</script>
</body>
</html>
